<template>
  <i
    @click="handleClick"
    class="hui-icon"
    :style="[
      { width: width || length },
      { height: height || length },
      { 'font-size': size },
      { color: color },
      { 'background-color': backgroundColor },
      { 'border-radius': borderRadius }
    ]"
    :class="[
      mode ? 'hui-icon--' + mode : '',
      active ? 'active' : ''
    ]"
  >
    <svg
      class="icon"
      aria-hidden="true"
    >
      <use :xlink:href="`#${icon}`"></use>
    </svg>
  </i>

</template>

<script>
/**
 * h-icon
 * @module common/h-icon
 * @desc iconfont字体图标组件
 *
 * @param { string } icon = iconClass类
 * @param { string } mode = dark, 模式，可选值dark/light, 无默认值
 * @param { string } size = 16px, 字体图标字号
 * @param { string } width = 24px, 宽度
 * @param { string } height = 24px, 高度
 * @param { string } length = 24px, 边长, 包含宽度和高度。如width/height/length同时这只，width/height的优先级高
 * @param { string } color = #000000, 字体图标颜色。
 * @param { string } background-color = #FFFFFF, 字体图标背景颜色
 * @param { boolean } active, 选中样式
 * @param { string } border-radius, 边角弧度
 */

import './#symbol'
export default {
  name: 'h-icon',
  componentName: 'h-icon',
  props: {
    icon: String,
    mode: {
      type: String,
      validator (value) {
        return [
          'dark',
          'light'
        ].indexOf(value) > -1
      }
    },
    size: String,
    width: String,
    height: String,
    length: String,
    color: String,
    backgroundColor: String,
    active: Boolean,
    borderRadius: String
  },
  methods: {
    handleClick (evt) {
      this.$emit('click', evt)
    }
  }
}
</script>

<style lang="less">
  @hui-icon--dark: .26;
  @hui-icon--dark-active: .54;

  @hui-icon--light: .3;
  @hui-icon--light-active: 1;

  .hui-icon {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: inherit;
    vertical-align: middle;

    .icon {
      width: 1em;
      height: 1em;
      line-height: 1;
      letter-spacing: normal;
      vertical-align: middle;
      fill: currentColor;
      overflow: hidden;
    }
  }

  .hui-icon--dark {
    opacity: @hui-icon--dark;

    &.active {
      opacity: @hui-icon--dark-active;
    }
  }

  .hui-icon--light {
    opacity: @hui-icon--light;

    &.active {
      opacity: @hui-icon--light-active;
    }
  }
</style>
